import React, { Component } from 'react';
import '../../assets/css/variable.scss';
import './Home.scss';
import MainWrapper from '../../layout/Main';
import { connect } from 'react-redux'

class Home extends Component {

  componentDidMount() {
    // console.log('now in home props of todos', this.props.todos)
  }

  render() {

    return (
      <div>
        <MainWrapper>
          <div>
            <p>this is home</p>
            <p>欢迎访问本网站！~</p>

            <div className="redux-data-wrapper">
              <div className="reduxWrapper">
                {
                  this.props.todos.map(item => (
                    <div key={item.id}>
                      id:<span>{item.id}</span> == text: <span>{item.text}</span> == completed<span>{item.completed}</span>
                    </div>
                  ))
                }
              </div>
            </div>
          </div>
        </MainWrapper>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    todos: state.todos
  }
};


Home = connect(
  mapStateToProps
)(Home);
export default Home;